<template>
   <!-- <div id="backToBox_"> -->
    <div id="backToTop_" v-if="backToTop">
        <div @click="phone" class="phone phoneBox" style="border-radius: 30px 30px 0 0; position: relative;">
            <img src="https://admin.hqx.com.cn/Public/App/image/backTop_phone.png" alt="" class="phoneImg">
            </img>
            <div class="tip_phone">0755-88866663</div>
        </div>
        <div @click="service" class="service serviceBox">
            <img src="https://admin.hqx.com.cn/Public/App/image/backTop_service.png" alt="" class="serviceImg">
        </div>
        <div @click="setTop" class="setTop topBox" style="border-radius: 0 0 30px 30px; ">
            <img src="https://admin.hqx.com.cn/Public/App/image/backTop_setTop.png" alt="" class="topImg">
        </div>
    </div>
   <!-- </div> -->
</template>


<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import {sendCopc} from "@/api/travel";

// 按钮状态
let backToTop = ref(true);



let service = async ()=>{
    await sendCopc();
    // 跳转在线客服
    window.open("https://www31c1.53kf.com/webCompany.php?arg=9005376&kf_sign=jUwNDMTczMczMTE2NTEwNDMwNDU0MDAzNzAwMDEyNzU%253D&style=2", "_blank");
}

let setTop = ()=>{
    window.scrollTo({
            top: 0,
            behavior: 'smooth' // 平滑滚动
        });
}

// 创建一个响应式变量来存储事件处理函数的引用
const scrollHandler = ref(null);

// 当组件挂载后，添加window的滚动事件监听器
// onMounted(() => {
//     // 滚动逻辑,显示与隐藏
//   scrollHandler.value = () => {
//     // 获取当前滚动位置
//     const scrollTop =  document.documentElement.scrollTop;
//     // console.log(`页面滚动到: ${scrollTop}px`);
//         if (scrollTop > 100) {
//             backToTop.value = true; // 显示按钮
//         } else {
//             backToTop.value = false; // 隐藏按钮
//         }
//   };
  
//   window.addEventListener('scroll', scrollHandler.value);
// });

// // 在组件卸载前，移除window的滚动事件监听器
// onBeforeUnmount(() => {
//   window.removeEventListener('scroll', scrollHandler.value);
// });




</script>

<style scoped>
/* #backToBox_{
    direction: ltr;
    font-size: 12px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    width: 1180px;
} */
#backToTop_ {
    /* position: fixed;
    bottom: 100px;
    margin-left: 1350px;
    z-index: 899; */

    position: fixed;
    right: 50px;
    bottom: 200px;

    /* 盒子大小 */
    width: 30px;
    /* 文字颜色 */
    color: #fff;
    /* 无边框 */
    border: none;
    /* 鼠标悬停时的光标 */
    cursor: pointer;
    /* 确保按钮在页面其他内容的上方 */
    z-index: 100;
    /* 边框圆角 */
    border-radius: 5px;
    
}
.phoneBox,
.serviceBox,
.topBox {
    width: 30px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    padding: 10px;
    /* overflow: hidden; */

}
.phoneBox:hover,
.serviceBox:hover,
.topBox:hover{
    background-color: rgb(53, 53, 53);
}
.phoneImg,
.serviceImg,
.topImg{
    width: 26px;
    height: 26px;
}

.tip_phone{
    width: 0;
    height: 60px;
    line-height: 60px;
    font-size: 21px;

    position: absolute;
    top: 0;
    left: 30px;
    z-index: -1;
    transform: translateX(-100%);
    transition: ease 0.5s;
    
    padding: 0 10px 0 20px;
    background-color: rgb(53, 53, 53);
    border-radius: 50px 0 0 50px;
    overflow: hidden;
}
.phoneBox:hover  .tip_phone{
    width: 180px;
    
}
.tip_phone:hover{
    width: 180px;
}
@media screen and (max-height: 699px) {
  /* 在这里编写当屏幕高度小于600px时的样式规则 */
  #backToTop_ {
   bottom: 80px !important;
  }
}

@media screen and (max-height: 499px) {
  /* 在这里编写当屏幕高度小于600px时的样式规则 */
  #backToTop_ {
   bottom: 40px !important;
  }
}

</style>